<script setup lang="ts">
import { useRouter } from 'vue-router'
import myMenu from './component/myMenu'

const router = useRouter()
const menuList = reactive([
  {
    name: 'newSuddenly',
    title: '新建突发停水',
    link: 'newSuddenly',
  },
  {
    name: 'publicityList',
    title: '停水公示',
    link: 'publicityList',
  },
  {
    name: 'suddenlyStopList',
    title: '突发停水列表',
    link: 'suddenlyStopList',
  },
  {
    name: 'planFormulation',
    title: '方案制定',
    link: 'planFormulation',
  },
  {
    name: 'planIntegration',
    title: '方案整合',
    link: 'planIntegration',
  },
  {
    name: 'schemeReview',
    title: '方案审核',
    link: 'schemeReview',
  },
  {
    name: 'outageProject',
    title: '停水工程',
    link: 'outageProject',
  },
  {
    name: 'protectWater',
    title: '保水设置',
    link: 'protectWater',
  },
])

// const allRoute = computed(() => router.getRoutes())
// console.log(
//   '%c [ allRoute ]-50',
//   'font-size:13px; background:pink; color:#bf2c9f;',
//   allRoute.value
// )

/** 有权限得菜单显示 */
const showMenu = computed(() => {
  return menuList.filter(
    (item) =>
      router.getRoutes().findIndex((rItm) => rItm.name === item.name) !== -1
  )
})

// const menuListShow = computed(() => {
//   return menuList.filter((item) => item.name)
// })

const toPage = (item: any) => {
  if (item.link) {
    router.push(item.link)
  }
}

onMounted(() => {})
</script>

<template>
  <div>
    <van-grid :gutter="20" :column-num="3">
      <van-grid-item
        @click="toPage(item)"
        v-for="item in showMenu"
        :key="item.name"
        icon="photo-o"
        :text="item.title"
      />
    </van-grid>

    <div class="">
      <myMenu />
      <div class=""></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.mydiv {
  width: 375px;
  background-color: #00f;
}
</style>
